<template>
  <div class="app">
    <AppHeader/>
    <div class="app-body">
      <AppSidebar :navItems="nav"/>
      <main class="main">
        <AppBreadcrumb :list="list"/>
        <div class="container-fluid">
          <router-view></router-view>
        </div>
      </main>
    </div>
    <AppFooter/>
  </div>
</template>

<script>

import { UserHeader as AppHeader, UserSidebar as AppSidebar, UserFooter as AppFooter, UserBreadcrumb as AppBreadcrumb } from '../../components'

export default {
  name: 'full',
  components: {
    AppHeader,
    AppSidebar,
    AppFooter,
    AppBreadcrumb
  },
  data () {
    return {
      nav: []
    }
  },
  computed: {
    name () {
      return this.$route.name
    },
    list () {
      return this.$route.matched
    }
  },
  created () {
    // 菜单数据优先取缓存
    const menu = localStorage.getItem('menu') ? JSON.parse(localStorage.getItem('menu')) : ''
    if (menu) {
      this.nav = menu
    } else {
      this.$post('/api/common/menu/index', {menu: JSON.parse(localStorage.getItem('user_info')).menus}).then((res) => {
        if (res) {
          // 菜单数据写入缓存
          localStorage.setItem('menu', JSON.stringify(res.data))
          this.nav = JSON.parse(localStorage.getItem('menu'))
        }
      })
    }
  }
}
</script>
